<template>
  <div id="box">{{ msg }}</div>
  <!-- 默认情况下调用无惨函数跨域不加括号 -->
  <button type="button" v-on:click="getMsg">你过来呀</button>
  <!-- 调用无惨函数跨域也可以加括号 -->
  <button type="button" v-on:click="getMsg()">你过来呀</button>
  <!-- @动作指令 语法糖 -->
  <button type="button" @click="getMsg">你过来呀</button>
  <!-- 同一个动作指令调同时调用多个函数的时候 函数需要加括号 -->
  <button type="button" @click="fun01(),fun02()">多事件绑定</button>
  <button type="button" @click="fun03($event)">事件对象参数</button>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      msg: '桃李不言下自成蹊'
    }
  },
  methods: {
    getMsg() {
      window.alert(this.msg)
    },
    fun01() {
      window.alert(1)
    },
    fun02() {
      window.alert(2)
    },
    fun03(e) {
      console.log(e)
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
